<template>
	<view>
		<!-- 若需显示自定义导航栏，需要在App.vue中引入Vue -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">民宿列表</block>
		</cu-custom>

		<scroll-view scroll-y="true">
			<view class="hotelListView">
				<view class="hotelItem" v-for="hotel in hotelList" 
				hover-class="navigator-hover"
				hover-start-time="0"
				:data-id = "hotel.hId"
				@click="goToDetail"
				>
					<view class="hotelImage">
						<image :src="'https://www.2306.tech/CCShop/'+hotel.hTitleImage" 
							style="border-radius: 20upx;"
						mode=""></image>
					</view>
					<view class="infoContent">
						<view class="info">
							<view class="hotelName"><b>{{hotel.hName}}</b></view>
							<view class="hotelInfo"> {{hotel.hRoom}} 室 {{hotel.hHall}} 厅 {{hotel.hToilet}} 卫 {{hotel.hSize}} ㎡</view>
							<view class="hotelTag">
								<view class='cu-tag'>免押金</view>
								<view class='cu-tag'>闪退</view>
							</view>
						</view>
						<view class="price">
							<view class="priceLabel">当前价：</view>
							<view class="hotelPrice text-price">{{hotel.hPrice}}/晚</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getHomestayList } from '../../api/homestayAPI.js'
	export default {
		data() {
			return {
				hotelList: [{
					"hStatus": "1",
					"hId": "2002",
					"hTag": "[Ljava.lang.String;@17a79f65;",
					"hRoom": "2",
					"hAddress": "阜平县坊里村",
					"hTitleImage": "images/homestay/2002/2002-0.jpg",
					"hDetailImage": "",
					"hSize": "40",
					"hPosition": "114.139366;38.763557",
					"hName": "树屋民宿",
					"hBedCount": "1",
					"hPrice": "429",
					"hPhone": "",
					"hPeople": "2",
					"hToilet": "1",
					"hHall": "1",
					"hAspect": "1",
					"hDescription": "",
					"hRemark": ""
				}]
			}
		},
		methods: {
			goToDetail(event) {
				uni.navigateTo({
					url:'../hotelDetail/hotelDetail?id='+event.currentTarget.dataset.id
				})
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中...'
			})
			getHomestayList().then(resp => {
				this.hotelList = resp
			})
		}
	}
</script>

<style>
	@import url("./hotelList.css");
</style>
